<template>
    <div>
        <Card>
            <div class="drag-box-card">
                <!-- 切记设置list1和list2属性时，一定要添加.sync修饰符 -->
                <drag-list :list1.sync="list1" :list2.sync="list2" :dropConClass="dropConClass" @on-change="handleChange">
                    <h3 slot="left-title">待办事项</h3>
                    <Card class="drag-item" slot="left" slot-scope="left">{{ left.itemLeft.name }}</Card>
                    <h3 slot="right-title">完成事项</h3>
                    <Card class="drag-item" slot="right" slot-scope="right">{{ right.itemRight.name }}</Card>
                </drag-list>
            </div>
            <div class="handle-log-box">
                <h3>操作记录</h3>
                <div class="handle-inner-box">
                    <p v-for="(item, index) in handleList" :key="`handle_item_${index}`">{{ item }}</p>
                </div>
            </div>
            <div class="res-show-box">
                <pre>{{ list1 }}</pre>
            </div>
            <div class="res-show-box">
                <pre>{{ list2 }}</pre>
            </div>
        </Card>
    </div>
</template>
<script>
import DragList from '_c/drag-list'
import {getDragList} from '@/api/data'
export default {
    name: 'drag_list_page',
    components: {
        DragList
    },
    data() {
        return {
            list1: [],
            list2: [],
            dropConClass: {
                left: ['drop-box', 'left-drop-box'],
                right: ['drop-box', 'right-drop-box']
            },
            handleList: []
        }
    },
    methods: {
        handleChange({src, target, oldIndex, newIndex}) {
            this.handleList.push(`${src} => ${target}, ${oldIndex} => ${newIndex}`)
        }
    },
    mounted() {
        getDragList().then((res) => {
            this.list1 = res.data
            this.list2 = [res.data[0]]
        })
    }
}
</script>
<style lang="less">
.drag-box-card {
    display: inline-block;
    width: 600px;
    height: 560px;
    .drag-item {
        margin: 10px;
    }
    h3 {
        padding: 10px 15px;
    }
    .drop-box {
        border: 1px solid #eeeeee;
        height: 455px;
        border-radius: 5px;
    }
    .left-drop-box {
        margin-right: 10px;
    }
    .right-drop-box {
        //
    }
}
.handle-log-box {
    display: inline-block;
    margin-left: 20px;
    border: 1px solid #eeeeee;
    vertical-align: top;
    width: 200px;
    height: 500px;
    h3 {
        padding: 10px 14px;
    }
    .handle-inner-box {
        height: ~'calc(100% - 44px)';
        overflow: auto;
        p {
            padding: 14px 0;
            margin: 0 14px;
            border-bottom: 1px dashed #eeeeee;
        }
    }
}
.res-show-box {
    display: inline-block;
    margin-left: 20px;
    border: 1px solid #eeeeee;
    vertical-align: top;
    width: 350px;
    height: 570px;
}
</style>
